<template>
	<view class="make">
		<view class="close" @click="$emit('close')">
			<image :src="`${baseImageUrl}/common/close1.png`"></image>
		</view>
		<view class="title">
			<view>农场铸造</view>
		</view>
		<view class="cover">
			<image :src="cover" class="cover" v-if="cover"></image>
			<view class="add" v-else>
				<image :src="`${baseImageUrl}/common/add2.png`" class="add"></image>
				<text class="text">添加</text>
			</view>
		</view>
		<view class="btn">
			<view @click="submit">立即铸造</view>
		</view>
		<view class="pet">添加藏品</view>
		<scroll-view scroll-x scroll-y class="scroll_view">
			<view class="item" v-for="item in list" @click="choiceClick(item)">
				<view class="item_cover">
					<image :src="item.product_cover" class="item_cover"></image>
					<image :src="`${baseImageUrl}/common/checked.png`" class="checkbox" v-if="checkbox_id==item.id">
					</image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		orderLists,
		industryJoin
	} from '@/request/api.js';
	export default {
		props: {
			id: {
				type: [Number, String],
				default: ""
			}
		},
		data() {
			return {
				cover: "",
				list: [],
				checkbox_id: ""
			}
		},

		async created() {
			let {
				list
			} = await orderLists({
				page: 1,
				limit: 9999,
				status: 1,
				product_type:4
			});
			this.list = list.list;
		},
		methods: {
			choiceClick(item) {
				let id = item.id;
				this.checkbox_id = this.checkbox_id == id ? "" : id;
				this.cover = this.checkbox_id ? item.product_cover : "";
			},
			async submit() {
				await industryJoin({
					industry_id: this.id,
					order_id: this.checkbox_id
				});
				this.$u.toast("添加成功");
				setTimeout(() => {
					this.$emit('close');
				}, 1000);
			}
		}
	}
</script>

<style scoped lang="scss">
	.make {
		width: 100vw;
		height: 1000rpx;
		padding: 35rpx 75rpx 0;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/750_1120.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.close {
			width: 122rpx;
			height: 122rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			transform: translate(20rpx, -45rpx);
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 256rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				color: #494338;
				font-size: 42rpx;
				font-weight: 400;
				font-family: LiSu;
				background: url(#{$baseImageUrl}/home/title.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.cover {
			width: 380rpx;
			height: 380rpx;
			background: url(#{$baseImageUrl}/bg/372_372.png) no-repeat;
			background-size: 100% 100%;
			margin: 32rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;

			.cover_image {
				width: 100%;
				height: 100%;
			}

			.add {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					color: #494338;
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;

			view {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.pet {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #494338;
			font-size: 40rpx;
			font-weight: 400;
			font-family: LiSu;
			margin-top: 32rpx;
			background: url(#{$baseImageUrl}/bg/title.png) no-repeat;
			background-size: 100% 100%;
		}

		.scroll_view {
			padding-top: 45rpx;
			box-sizing: border-box;
			white-space: nowrap;

			.item {
				display: inline-block;
				width: 150rpx;
				height: 168rpx;
				margin-right: 60rpx;
				padding-top: 18rpx;
				box-sizing: border-box;

				.item_cover {
					width: 150rpx;
					height: 150rpx;
					padding: 5rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/bg/372_372.png) no-repeat;
					background-size: 100% 100%;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.checkbox {
						width: 52rpx;
						height: 52rpx;
						position: absolute;
						top: -18rpx;
						right: -13rpx;
						z-index: 2;
					}
				}

				&:last-child {
					margin: 0;
				}
			}
		}
	}
</style>